<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统 - 功能修复版</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.8.3/dist/css/layui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #4361ee;
            --primary-light: #4895ef;
            --secondary: #3f37c9;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #e63946;
            --light: #f8f9fa;
            --dark: #212529;
            --gray: #6c757d;
            --border: #dee2e6;
            --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f1 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--dark);
        }
        
        .container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
        }
        
        .header h1 {
            font-size: 2.5rem;
            color: var(--primary);
            margin-bottom: 10px;
            font-weight: 700;
        }
        
        .header p {
            font-size: 1.1rem;
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto;
        }
        
        .toolbar {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            background: white;
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
        }
        
        .btn-group {
            display: flex;
            gap: 15px;
        }
        
        .custom-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            background: var(--primary);
            color: white;
        }
        
        .custom-btn i {
            font-size: 1.1rem;
        }
        
        .custom-btn:hover {
            opacity: 0.9;
            transform: translateY(-2px);
        }
        
        .btn-add {
            background: var(--primary);
        }
        
        .btn-edit {
            background: var(--warning);
        }
        
        .btn-delete {
            background: var(--danger);
        }
        
        .btn-generate {
            background: var(--success);
        }
        
        .table-container {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            padding: 20px;
        }
        
        .table-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .table-header h2 {
            font-size: 1.8rem;
            color: var(--primary);
        }
        
        .table-actions {
            display: flex;
            gap: 10px;
        }
        
        .search-box {
            position: relative;
            width: 300px;
        }
        
        .search-box input {
            width: 100%;
            padding: 10px 15px 10px 40px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            color: var(--gray);
            font-size: 0.9rem;
        }
        
        .config-preview {
            background: #2c3e50;
            color: #ecf0f1;
            border-radius: 8px;
            padding: 20px;
            font-family: 'Courier New', monospace;
            white-space: pre;
            overflow-x: auto;
            max-height: 500px;
            margin-top: 20px;
        }
        
        .config-key {
            color: #3498db;
        }
        
        .config-value {
            color: #2ecc71;
        }
        
        .config-comment {
            color: #7f8c8d;
        }
        
        /* 任务表单样式 */
        .form-container {
            padding: 20px;
        }
        
        .form-section {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            transition: var(--transition);
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
        }
        
        .section-header {
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .section-header i {
            font-size: 1.2rem;
        }
        
        .section-header h2 {
            font-size: 1.3rem;
            font-weight: 600;
        }
        
        .form-content {
            padding: 20px;
            display: grid;
            gap: 15px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        label {
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        label.required::after {
            content: '*';
            color: var(--danger);
            font-size: 1.1rem;
            margin-left: 4px;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 1rem;
            transition: var(--transition);
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);
        }
        
        textarea {
            min-height: 100px;
            resize: vertical;
        }
        
        .array-input {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .array-input .item {
            display: flex;
            gap: 10px;
        }
        
        .array-input .item input {
            flex: 1;
        }
        
        .array-input .item button {
            background: var(--danger);
            color: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .array-input .item button:hover {
            background: #c82333;
        }
        
        .add-item-btn {
            background: var(--success);
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            font-weight: 600;
            transition: var(--transition);
        }
        
        .add-item-btn:hover {
            background: #3aa9d0;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .checkbox-group input {
            width: auto;
        }
        
        .interactive-response {
            background: #f8f9ff;
            border-radius: 8px;
            padding: 15px;
            border: 1px dashed var(--primary-light);
        }
        
        .interactive-response .form-row {
            margin-bottom: 15px;
        }
        
        .actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--border);
        }
        
        .modal-btn {
            padding: 12px 28px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .btn-save {
            background: var(--primary);
            color: white;
        }
        
        .btn-save:hover {
            background: #3250d4;
        }
        
        .btn-cancel {
            background: white;
            color: var(--primary);
            border: 2px solid var(--primary);
        }
        
        .btn-cancel:hover {
            background: #f0f2ff;
        }
        
        .info-text {
            font-size: 0.85rem;
            color: var(--gray);
            font-style: italic;
            margin-top: 3px;
        }
        
        .badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 8px;
        }
        
        .badge-required {
            background: #ffebee;
            color: var(--danger);
        }
        
        .badge-common {
            background: #fff8e1;
            color: #ff9800;
        }
        
        .badge-advanced {
            background: #e8f5e9;
            color: #4caf50;
        }
        
        @media (max-width: 768px) {
            .toolbar {
                flex-direction: column;
                gap: 15px;
            }
            
            .btn-group {
                flex-wrap: wrap;
            }
            
            .header h1 {
                font-size: 2rem;
            }
            
            .form-row {
                flex-direction: column;
                gap: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-tasks"></i> 任务管理系统</h1>
            <p>管理您的自动化任务，创建、编辑和生成任务配置文件</p>
        </div>
        
        <div class="toolbar">
            <div class="btn-group">
                <button class="custom-btn btn-add" id="addTask">
                    <i class="fas fa-plus"></i> 添加任务
                </button>
                <button class="custom-btn btn-edit" id="editTask">
                    <i class="fas fa-edit"></i> 编辑任务
                </button>
                <button class="custom-btn btn-delete" id="deleteTask">
                    <i class="fas fa-trash"></i> 删除任务
                </button>
            </div>
            <button class="custom-btn btn-generate" id="generateConfig">
                <i class="fas fa-file-code"></i> 生成配置文件
            </button>
        </div>
        
        <div class="table-container">
            <div class="table-header">
                <h2><i class="fas fa-table"></i> 任务列表</h2>
                <div class="table-actions">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="searchInput" placeholder="搜索任务...">
                    </div>
                </div>
            </div>
            
            <table class="layui-table" id="taskTable">
                <colgroup>
                    <col width="40">
                    <col width="80">
                    <col width="200">
                    <col>
                    <col width="120">
                    <col width="180">
                    <col width="100">
                </colgroup>
                <thead>
                    <tr>
                        <th><input type="checkbox" id="selectAll"></th>
                        <th>序号</th>
                        <th>任务名称</th>
                        <th>执行命令</th>
                        <th>执行模式</th>
                        <th>目标主机</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody id="taskTableBody">
                    <!-- 任务数据将通过JavaScript动态生成 -->
                </tbody>
            </table>
        </div>
        
        <div class="footer">
            <p>© 2023 任务管理系统 | 基于LayUI构建 | <span id="taskCount">0</span>个任务</p>
        </div>
    </div>
    
    <!-- 任务表单悬浮层 -->
    <div id="taskFormModal" style="display:none;">
        <div class="form-container">
            <div class="form-section">
                <div class="section-header">
                    <i class="fas fa-cog"></i>
                    <h2>任务配置</h2>
                </div>
                <div class="form-content">
                    <input type="hidden" id="taskId">
                    <div class="form-group">
                        <label class="required">任务名称</label>
                        <input type="text" id="taskName" placeholder="例如：monitor_real_time_logs">
                        <div class="info-text">唯一标识任务的名称</div>
                    </div>
                    
                    <div class="form-group">
                        <label class="required">执行命令</label>
                        <input type="text" id="taskCommand" placeholder="例如：timeout 60 tail -f /var/log/syslog">
                        <div class="info-text">任务执行的具体命令</div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label>执行模式 <span class="badge badge-common">常用</span></label>
                            <select id="taskMode">
                                <option value="serial">serial (串行)</option>
                                <option value="parallel">parallel (并行)</option>
                            </select>
                            <div class="info-text">默认: serial</div>
                        </div>
                        
                        <div class="form-group">
                            <label>超时时间(秒) <span class="badge badge-common">常用</span></label>
                            <input type="number" id="taskTimeout" value="30">
                            <div class="info-text">默认: 30</div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label>主机列表 <span class="badge badge-common">常用</span></label>
                        <div class="array-input" id="hostsList">
                            <!-- 主机列表将通过JavaScript动态生成 -->
                        </div>
                        <button class="add-item-btn" id="addHost">
                            <i class="fas fa-plus"></i> 添加主机
                        </button>
                        <div class="info-text">默认为所有主机</div>
                    </div>
                    
                    <div class="form-group">
                        <label>期望输出 <span class="badge badge-common">常用</span></label>
                        <div class="array-input" id="expectedList">
                            <!-- 期望输出将通过JavaScript动态生成 -->
                        </div>
                        <button class="add-item-btn" id="addExpected">
                            <i class="fas fa-plus"></i> 添加期望输出
                        </button>
                        <div class="info-text">输出中包含这些内容表示成功</div>
                    </div>
                    
                    <div class="actions">
                        <button class="modal-btn btn-save" id="saveTask">
                            <i class="fas fa-save"></i> 保存任务
                        </button>
                        <button class="modal-btn btn-cancel" id="cancelTask">
                            <i class="fas fa-times"></i> 取消
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 配置文件预览悬浮层 -->
    <div id="configPreviewModal" style="display:none; padding:20px;">
        <h2 style="margin-bottom:15px; color:#3498db;"><i class="fas fa-file-code"></i> 配置文件预览</h2>
        <p style="margin-bottom:20px;">以下是选中任务的YAML配置文件，您可以复制使用：</p>
        
        <div class="config-preview" id="configContent">
            <!-- 配置内容将通过JavaScript动态生成 -->
        </div>
        
        <div style="margin-top:20px; text-align:center;">
            <button class="custom-btn" style="margin-right:10px;" id="copyConfig">
                <i class="fas fa-copy"></i> 复制配置
            </button>
            <button class="custom-btn btn-generate" id="exportConfig">
                <i class="fas fa-download"></i> 导出文件
            </button>
            <button class="custom-btn btn-cancel" id="closeConfig">
                <i class="fas fa-times"></i> 关闭
            </button>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/layui@2.8.3/dist/layui.min.js"></script>
    <script>
        // 任务数据存储
        let tasks = [];
        let currentTaskId = null;
        
        // 示例任务数据
        const sampleTasks = [
            {
                id: 1,
                name: "monitor_real_time_logs",
                command: "timeout 60 tail -f /var/log/syslog",
                mode: "parallel",
                timeout: 10,
                hosts: ["web-server-01", "api-server-01"],
                expected: ["active (running)"],
                unexpected: ["failed"],
                status: "running"
            },
            {
                id: 2,
                name: "check_disk_usage",
                command: "df -h",
                mode: "serial",
                timeout: 30,
                hosts: ["db-server-01", "file-server-01"],
                expected: [],
                unexpected: [],
                status: "stopped"
            },
            {
                id: 3,
                name: "backup_database",
                command: "mysqldump -u root -p dbname > backup.sql",
                mode: "serial",
                timeout: 30,
                hosts: ["db-server-01"],
                expected: [],
                unexpected: [],
                status: "stopped"
            },
            {
                id: 4,
                name: "restart_nginx_service",
                command: "systemctl restart nginx",
                mode: "parallel",
                timeout: 30,
                hosts: ["web-server-01", "web-server-02"],
                expected: [],
                unexpected: [],
                status: "running"
            }
        ];
        
        // DOM 加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化任务数据
            tasks = [...sampleTasks];
            renderTaskTable();
            
            // 初始化事件监听器
            initEventListeners();
        });
        
        // 渲染任务表格
        function renderTaskTable() {
            const tbody = document.getElementById('taskTableBody');
            tbody.innerHTML = '';
            
            tasks.forEach(task => {
                const row = document.createElement('tr');
                row.dataset.id = task.id;
                
                // 状态徽章
                const statusBadge = task.status === 'running' ? 
                    '<span class="layui-badge layui-bg-green">运行中</span>' : 
                    '<span class="layui-badge">未运行</span>';
                
                row.innerHTML = `
                    <td><input type="checkbox" class="task-checkbox" value="${task.id}"></td>
                    <td>${task.id}</td>
                    <td>${task.name}</td>
                    <td>${task.command}</td>
                    <td>${task.mode}</td>
                    <td>${task.hosts.join(', ')}</td>
                    <td>${statusBadge}</td>
                `;
                
                tbody.appendChild(row);
            });
            
            // 更新任务计数
            document.getElementById('taskCount').textContent = tasks.length;
        }
        
        // 渲染表单数组字段
        function renderArrayField(containerId, items, placeholder) {
            const container = document.getElementById(containerId);
            container.innerHTML = '';
            
            items.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'item';
                itemDiv.innerHTML = `
                    <input type="text" value="${item}" placeholder="${placeholder}">
                    <button><i class="fas fa-times"></i></button>
                `;
                container.appendChild(itemDiv);
            });
            
            // 添加删除按钮事件
            container.querySelectorAll('button').forEach(button => {
                button.addEventListener('click', function() {
                    this.parentElement.remove();
                });
            });
        }
        
        // 初始化事件监听器
        function initEventListeners() {
            // 全选/取消全选
            document.getElementById('selectAll').addEventListener('change', function() {
                const checkboxes = document.querySelectorAll('.task-checkbox');
                checkboxes.forEach(checkbox => {
                    checkbox.checked = this.checked;
                });
            });
            
            // 添加任务按钮
            document.getElementById('addTask').addEventListener('click', function() {
                currentTaskId = null;
                resetTaskForm();
                openTaskForm();
            });
            
            // 编辑任务按钮
            document.getElementById('editTask').addEventListener('click', function() {
                const selectedTask = getSelectedTask();
                if (!selectedTask) return;
                
                currentTaskId = selectedTask.id;
                loadTaskForm(selectedTask);
                openTaskForm();
            });
            
            // 删除任务按钮
            document.getElementById('deleteTask').addEventListener('click', function() {
                const selectedTasks = getSelectedTasks();
                if (selectedTasks.length === 0) {
                    layui.layer.msg('请选择要删除的任务', {icon: 2});
                    return;
                }
                
                layui.layer.confirm(`确定要删除选中的${selectedTasks.length}个任务吗？`, {
                    icon: 3,
                    title: '删除确认'
                }, function(index) {
                    deleteTasks(selectedTasks);
                    layui.layer.close(index);
                });
            });
            
            // 生成配置按钮
            document.getElementById('generateConfig').addEventListener('click', function() {
                const selectedTasks = getSelectedTasks();
                if (selectedTasks.length === 0) {
                    layui.layer.msg('请选择要生成配置文件的任务', {icon: 2});
                    return;
                }
                
                generateConfig(selectedTasks);
            });
            
            // 保存任务按钮
            document.getElementById('saveTask').addEventListener('click', saveTask);
            
            // 取消按钮
            document.getElementById('cancelTask').addEventListener('click', function() {
                layui.layer.closeAll();
            });
            
            // 添加主机按钮
            document.getElementById('addHost').addEventListener('click', function() {
                const container = document.getElementById('hostsList');
                addArrayItem(container, '输入主机名');
            });
            
            // 添加期望输出按钮
            document.getElementById('addExpected').addEventListener('click', function() {
                const container = document.getElementById('expectedList');
                addArrayItem(container, '输入期望内容');
            });
            
            // 复制配置按钮
            document.getElementById('copyConfig').addEventListener('click', function() {
                const configContent = document.getElementById('configContent').textContent;
                navigator.clipboard.writeText(configContent).then(() => {
                    layui.layer.msg('配置已复制到剪贴板', {icon: 1});
                });
            });
            
            // 关闭配置预览
            document.getElementById('closeConfig').addEventListener('click', function() {
                layui.layer.closeAll();
            });
            
            // 搜索功能
            document.getElementById('searchInput').addEventListener('keyup', function() {
                const value = this.value.toLowerCase();
                const rows = document.querySelectorAll('#taskTableBody tr');
                
                rows.forEach(row => {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(value) ? '' : 'none';
                });
            });
        }
        
        // 添加数组项
        function addArrayItem(container, placeholder) {
            const itemDiv = document.createElement('div');
            itemDiv.className = 'item';
            itemDiv.innerHTML = `
                <input type="text" placeholder="${placeholder}">
                <button><i class="fas fa-times"></i></button>
            `;
            container.appendChild(itemDiv);
            
            // 添加删除按钮事件
            itemDiv.querySelector('button').addEventListener('click', function() {
                itemDiv.remove();
            });
        }
        
        // 获取选中的任务
        function getSelectedTasks() {
            const selectedIds = [];
            document.querySelectorAll('.task-checkbox:checked').forEach(checkbox => {
                selectedIds.push(parseInt(checkbox.value));
            });
            
            return tasks.filter(task => selectedIds.includes(task.id));
        }
        
        // 获取选中的单个任务（用于编辑）
        function getSelectedTask() {
            const selectedTasks = getSelectedTasks();
            
            if (selectedTasks.length === 0) {
                layui.layer.msg('请选择一个任务进行编辑', {icon: 2});
                return null;
            }
            
            if (selectedTasks.length > 1) {
                layui.layer.msg('只能选择一个任务进行编辑', {icon: 2});
                return null;
            }
            
            return selectedTasks[0];
        }
        
        // 打开任务表单
        function openTaskForm() {
            layui.layer.open({
                type: 1,
                title: currentTaskId ? 
                    '<i class="fas fa-edit"></i> 编辑任务' : 
                    '<i class="fas fa-plus-circle"></i> 添加任务',
                area: ['800px', '90%'],
                content: document.getElementById('taskFormModal')
            });
        }
        
        // 重置任务表单
        function resetTaskForm() {
            document.getElementById('taskId').value = '';
            document.getElementById('taskName').value = '';
            document.getElementById('taskCommand').value = '';
            document.getElementById('taskMode').value = 'serial';
            document.getElementById('taskTimeout').value = '30';
            
            renderArrayField('hostsList', [], '输入主机名');
            renderArrayField('expectedList', [], '输入期望内容');
        }
        
        // 加载任务数据到表单
        function loadTaskForm(task) {
            document.getElementById('taskId').value = task.id;
            document.getElementById('taskName').value = task.name;
            document.getElementById('taskCommand').value = task.command;
            document.getElementById('taskMode').value = task.mode;
            document.getElementById('taskTimeout').value = task.timeout;
            
            renderArrayField('hostsList', task.hosts, '输入主机名');
            renderArrayField('expectedList', task.expected, '输入期望内容');
        }
        
        // 保存任务
        function saveTask() {
            // 获取表单数据
            const taskId = document.getElementById('taskId').value;
            const name = document.getElementById('taskName').value.trim();
            const command = document.getElementById('taskCommand').value.trim();
            const mode = document.getElementById('taskMode').value;
            const timeout = parseInt(document.getElementById('taskTimeout').value) || 30;
            
            // 验证必填字段
            if (!name || !command) {
                layui.layer.msg('任务名称和执行命令是必填项', {icon: 2});
                return;
            }
            
            // 获取主机列表
            const hosts = [];
            document.querySelectorAll('#hostsList .item input').forEach(input => {
                if (input.value.trim()) hosts.push(input.value.trim());
            });
            
            // 获取期望输出
            const expected = [];
            document.querySelectorAll('#expectedList .item input').forEach(input => {
                if (input.value.trim()) expected.push(input.value.trim());
            });
            
            // 创建任务对象
            const taskData = {
                id: taskId ? parseInt(taskId) : Date.now(), // 新任务使用时间戳作为ID
                name,
                command,
                mode,
                timeout,
                hosts,
                expected,
                unexpected: [],
                status: "stopped"
            };
            
            // 保存或更新任务
            if (taskId) {
                // 更新现有任务
                const index = tasks.findIndex(t => t.id === parseInt(taskId));
                if (index !== -1) {
                    tasks[index] = {...tasks[index], ...taskData};
                }
            } else {
                // 添加新任务
                tasks.push(taskData);
            }
            
            // 刷新表格
            renderTaskTable();
            
            // 关闭表单
            layui.layer.closeAll();
            
            // 提示用户
            layui.layer.msg(`任务 "${name}" ${taskId ? '已更新' : '已添加'}`, {icon: 1});
        }
        
        // 删除任务
        function deleteTasks(selectedTasks) {
            const idsToDelete = selectedTasks.map(task => task.id);
            tasks = tasks.filter(task => !idsToDelete.includes(task.id));
            
            // 刷新表格
            renderTaskTable();
            
            // 提示用户
            layui.layer.msg(`已删除 ${selectedTasks.length} 个任务`, {icon: 1});
        }
        
        // 生成配置
        function generateConfig(selectedTasks) {
            const configPreview = document.getElementById('configContent');
            let configText = '# 任务配置 - 自动生成\n';
            configText += `# 生成时间: ${new Date().toLocaleString()}\n\n`;
            
            configText += 'tasks:\n';
            
            selectedTasks.forEach(task => {
                configText += `  - name: "${task.name}"\n`;
                configText += `    command: "${task.command}"\n`;
                configText += `    mode: "${task.mode}"\n`;
                configText += `    timeout: ${task.timeout}\n`;
                
                if (task.hosts.length > 0) {
                    configText += '    hosts:\n';
                    task.hosts.forEach(host => {
                        configText += `      - "${host}"\n`;
                    });
                }
                
                if (task.expected.length > 0) {
                    configText += '    expected:\n';
                    task.expected.forEach(item => {
                        configText += `      - "${item}"\n`;
                    });
                }
                
                configText += '\n';
            });
            
            // 添加语法高亮
            configPreview.innerHTML = configText
                .replace(/(\bname\b|\bcommand\b|\bmode\b|\btimeout\b|\bhosts\b|\bexpected\b)/g, '<span class="config-key">$1</span>')
                .replace(/: "([^"]*)"/g, ': <span class="config-value">"$1"</span>')
                .replace(/: (\d+)/g, ': <span class="config-value">$1</span>')
                .replace(/# ([^\n]+)/g, '<span class="config-comment"># $1</span>');
            
            // 显示配置预览
            layui.layer.open({
                type: 1,
                title: '<i class="fas fa-file-code"></i> 配置文件预览',
                area: ['900px', '80%'],
                content: document.getElementById('configPreviewModal')
            });
        }
    </script>
</body>
</html>